<template>
    <div class="batch-qrDetail-table">
        <pagination-table
            ref="batchQrDetailTable"
            :list="list"
            :options="options"
            :columns="columns"
            :pagination="pagination"
        />
        <div class="batch-qrDetail-btnlist">
            <el-button type="primary" @click.native.prevent="onSubmit" :loading="loading">二维码生成</el-button>
        </div>
    </div>
</template>

<script>
// 提示框组件
import TipPopup from './tipPopup'
// 二维码生成器
import QRCode from 'qrcodejs2'
// 二维码上传
import { Report_Qrcode_Upload, Report_Qrcode_QueryById } from '@/server/videoQrcodeManage'

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(list) {
            this.list = list.map(row=>{
                // 初始化进度为0
                row['progress'] = 0
                return row
            })
        }
    },
    data() {
        return {
            loading: false,
            list: [],
            columns: [
                {
                    prop: "reportCode",
                    label: "报告编号",
                },
                {
                    prop: "任务单编号",
                    label: "任务单编号",
                },
                {
                    width: 100,
                    prop: "sampleStatus",
                    label: "样品状态",
                },
                {
                    width: 80,
                    prop: "entrustCode",
                    label: "委托编号",
                },
                {
                    label: "生成进度",
                    render: (h, params) => {
                        if (params["row"]) {
                            let progress = params["row"]["progress"]
                            return (
                                <el-progress type="circle" percentage={progress} width={48}></el-progress>
                            )
                        }
                    }
                }
            ],
            options: {
                index: true,
                loading: false,
                initTable: false,
                border: false,
                selection: false,
                mutiSelect: false,
                headerCellStyle: {
                    backgroundColor: "#E8F3FF",
                    color: "#3D4256 ",
                },
            },
            pagination: {
                show: false
            }
        };
    },
    methods: {
        // 创建二维码
        createQrCode(row) {
            // 创建dom
            let divIns = document.createElement('div');
            // 生成二维码
            let qrcode = new QRCode(divIns, {
                // text 需要转二维码的内容 可以是文本也可以是一个链接 是链接会直接跳走
                text: "http://www.baidu.com",
                width: 100,
                height: 100,
                colorDark: "#000", //二维码颜色
                colorLight: "#fff", //二维码背景颜色
                correctLevel: QRCode.CorrectLevel.H, //容错率,L/M/H
            })
            row["currentSrc"] = qrcode["_oDrawing"]["_elCanvas"].toDataURL("image/png")
            return row;
        },
        onSubmit() {
            // 先查询任务单是否有未上传视频
            let p2 = []
            this.list.forEach(row => {
                p2.push( Report_Qrcode_QueryById(row['reportId']) )
            })
            let tips = []
            Promise.all(p2).then(list => {
                // tips = list.map(res => res['data'])
                // 判断是否有提示
                if( tips.length > 0 ) {
                    // 弹框提示
                    let instance = this.$dialog.show(TipPopup, {
                        title: '提示',
                        width: '40%',
                        closeOnClickModal: false,
                        closeOnPressEscape: false,
                        showClose: false,
                        modal: false
                    }, tips)
                    // 提示确认时候调用
                    instance.onDidConfirmd = () => {
                        // 上传循环调用
                        this.uploadLoopCall()
                    }
                } else {
                    // 上传循环调用
                    this.uploadLoopCall()
                }
            })
        },
        uploadLoopCall() {
            // 循环调用步骤
            let index = 0
            let length = this.list.length
            this.loading = true
            let loopCall = async (row) => {
                // 生成二维码图片
                let newRow = this.createQrCode(Object.assign({},{...row}))
                // 页面需要修改数据
                let params = Object.assign({},{...row},{codeStatus: 2}) 
                // 添加二维码图片 
                let formData = new FormData()
                let base64 =  newRow["currentSrc"]
                formData.append('file', base64)
                // 调用上传接口
                const res = await Report_Qrcode_Upload(formData, params)
                if (res.code !== 200) return
                // 设置进度完成
                this.$set(this.list, index, {...row, progress: 100})
                // 增加索引
                index++
                // 循环结束
                if( index === length ) {
                    let timer = setTimeout(() => {
                        clearTimeout(timer)
                        this.loading = false
                        this.$currentDialog.close()
                    }, 1200)
                    return
                }
                // 调用下一个
                loopCall(this.list[index])
            }
            // 调用
            loopCall(this.list[index])
        }
    }
};
</script>

<style lang="scss" scoped>
.batch-qrDetail {
    padding: 5px 0;
    overflow: hidden;
    &-table {
        color: #fff;
    }
    &-btnlist {
        display: flex;
        justify-content: flex-end;
        margin-top: 44px;
    }
}
</style>